<template >
    <div>
        <!-- 添加按钮 -->
        <el-button type="primary" size="small" @click="addmany">添加参数</el-button>
        <!-- 动态参数表格  -->
        <el-table :data="tables" style="width: 100%" border>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <!-- tag 标签 -->
                    <el-tag :key="i" v-for="(item, i) in props.row.attr_vals" closable :disable-transitions="false"
                        @close="handleClose(i, props.row)">
                        {{ item }}
                    </el-tag>
                    <!-- tag 输入框 -->
                    <el-input class="input-new-tag" v-if="props.row.inputVisible" v-model="props.row.inputValue"
                        ref="saveTagInput" size="small" @keyup.enter.native="handleInputConfirm(props.row)"
                        @blur="handleInputConfirm(props.row)">
                    </el-input>
                    <!-- tag 按钮-->
                    <el-button v-else class="button-new-tag" size="small" @click="showInput(props.row)">+ New
                        Tag</el-button>
                </template>
            </el-table-column>
            <el-table-column type="index" width="48">
            </el-table-column>
            <el-table-column prop="attr_name" label="参数名称" width="561">

            </el-table-column>
            <el-table-column fixed="right" label="操作" width="550">
                <template slot-scope="scope">
                    <el-button icon="el-icon-edit" type="primary" size="small" @click="manyxg(scope.row)">编辑</el-button>

                    <el-button type="danger" size="small" icon="el-icon-delete"
                        @click="manydel(scope.row.attr_id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 模态框  -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">

            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="动态参数" prop="attr_name">
                    <el-input v-model="ruleForm.attr_name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm('ruleForm')">取消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
                </el-form-item>
            </el-form>

        </el-dialog>



    </div>
</template>
<script>
import {  delmany, editmany, addmany, } from "../api/api"
export default {
    props: {
        tables: {
            type: Array,
            defaute: [],
        },
        cat_id: {
            type: Array,
            defaute: []
        },
        activeName:{
            type:String,
            defaute:[]
        }
    },
    data() {
        return {
            xgid: '',
            rules: {
                attr_name: { required: true, message: '请输入动态参数', trigger: 'blur' },
            },
            // tag标签 
            tagmanylist: [],
            //模态框
            title: "",
            dialogVisible: false,
            //表单
            ruleForm: {
                attr_name: '',

            },
        }
    },
    methods: {

        addmany() {
            this.title = '添加动态参数';
            this.dialogVisible = true


        },
        funs(){
            this.$emit('fun')
        },

        //点击按钮展示文本框输入
        showInput(row) {
            row.inputVisible = true
            //自动获取文本框的焦点
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });


        },

        //点击删除对应的tag标签
        handleClose(i, row) {
            row.attr_vals.splice(i, 1)
            let delobj = {
                cat_id: this.cat_id[2],
                attr_id: row.attr_id,
                attr_name: row.attr_name,
                attr_vals: row.attr_vals.join(' '),
                attr_sel: row.attr_sel,
            }
            editmany(delobj).then(res => {
                console.log(res);
            })

        },
        //tag文本框失去焦点或摁下enter都会触发
        handleInputConfirm(row) {
            if (row.inputValue.trim().length == 0) {
                row.inputValue = ''
                row.inputVisible = false
                return
            }
            //页面添加tag
            row.attr_vals.push(row.inputValue.trim())
            row.inputValue = ''
            row.inputVisible = false
            //发起请求保存本次操作
            let tagobj = {
                cat_id: this.cat_id[2],
                attr_id: row.attr_id,
                attr_name: row.attr_name,
                attr_vals: row.attr_vals.join(' '),
                attr_sel: row.attr_sel,
            }
            editmany(tagobj).then(res => {
                //    console.log(res);
            })
        },
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log('submit!');
                    //修改
                    if (this.title == '修改动态参数') {
                        let xgobj = {
                            cat_id: this.cat_id[2],
                            attr_name: this.ruleForm.attr_name,
                            attr_id: this.xgid,
                            attr_sel: this.activeName,

                        }
                        // console.log(xgobj);
                        editmany(xgobj).then(res => {
                            // console.log(res);
                            this.funs()
                        })


                    }
                    if (this.title == '添加动态参数') {
                        let addobj = {
                            cat_id: this.cat_id[2],
                            attr_name: this.ruleForm.attr_name,

                            attr_sel: this.activeName,

                        }
                        addmany(addobj).then(res => {
                            console.log(res);
                            this.funs()
                        })

                    }
                    //关闭模态框重新渲染页面
                    this.dialogVisible = false

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
            this.dialogVisible = false
        },

        //动态参数修改
        manyxg(row) {
            this.title = "修改动态参数"
            this.dialogVisible = true
            this.ruleForm = row
            this.xgid = row.attr_id
        },
        //添加动态参数
        addmany() {
            this.title = '添加动态参数';
            this.dialogVisible = true


        },
        // 动态参数删除 
        manydel(row) {
            delmany({ id: this.cat_id[2], attrid: row }).then(res => {
                // console.log(res);
                this.funs()
            })
        },
    }


}
</script>
<style lang="scss" scoped>
  .el-tag {
    margin-left: 10px;
}

.input-new-tag {
    width: 120px;
}  
</style>